<template>
    <ve-bmap
      :settings="chartSettings"
      :title="title"
      :tooltip="tooltip"
      :series="chartSeries"
      height="100%"
    ></ve-bmap>
</template>

<script>
import CommonDataMixin from '../../mixins/commonDataMixin'
const converData = function (data, geo) {
  const res = []
  data.forEach(item => {
    const { name, value } = item
    const coord = geo[name]
    res.push({
      name,
      value: [...coord, value]
    })
  })
  return res
}

export default {
  mixins: [CommonDataMixin],
  data () {
    return {
      tooltip: {},
      title: {
        text: '国基外卖销售数据大盘',
        subtext: '销售趋势统计',
        sublink: 'https://chendong00.top',
        left: 'center'
      },
      chartSettings: {
        key: 'RrBR6IXsHQoNVn8fIOCbd3yk9cCMqWw8',
        bmap: {
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: false, // 是否可以移动地图
          mapStyle: {}
        }
      },
      chartSeries: []
    }
  },
  watch: {
    mapData () {
      const { data, geo } = this.mapData
      this.chartSeries = [{
        name: '销售额',
        type: 'scatter',
        coordinateSystem: 'bmap',
        data: converData(data, geo),
        encode: {
          value: 2
        },
        itemStyle: {
          color: 'purple'
        },
        // 点大小定制
        symbolSize: function (val) {
          return val[2] / 10
        },
        label: {
          show: false,
          position: 'right',
          formatter: function (val) {
            return `${val.data.name} - ${val.data.value[2]}`
          }
        },
        emphasis: {
          label: {
            show: true
          }
        }
      },
      {
        name: 'Top 2',
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        data: converData(data.sort(function (a, b) {
          return b.value - a.value
        }), geo).slice(0, 10),
        symbolSize: function (val) {
          return val[2] / 10
        },
        encode: {
          value: 2
        },
        label: {
          formatter: function (v) {
            return `${v.data.name} - ${v.data.value[2]}`
          },
          position: 'right',
          show: true
        },
        hoverAnimation: true,
        rippleEffect: {
          brushType: 'stroke'
        },
        itemStyle: {
          color: 'purple',
          shadowBlur: 10,
          shadowColor: '#333'
        }
      }]
    }
  }
}
</script>

<style scoped lang="scss">

</style>
